<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>title</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        body{
            padding:0px;
        }
        th,td,ul{
            text-align:center;
            vertical-align: middle;
        }
        a{
            cursor: pointer;
        }
        textarea{/*文本域不能拖拽*/
            outline:none;
            resize:none;
        }
    </style>
    <!-- 引入 js -->
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script src="js/util.js"></script>
</head>
<body ng-app="m">

<div ng-include="nav.html"></div>

<!--<script>
    var nm = angular.module("nm", ["filterModule"]);
    nm.controller("nc", function ($scope, $rootScope, $location) {
        $scope.collapse = $location.search().collapse && $location.search().collapse == "true";
        if ($scope.collapse) {
            $("body").addClass("nav-collapse");
        }
        $scope.collapseF = function () {
            $scope.collapse = !$scope.collapse;
            $location.search("collapse", $scope.collapse ? "true" : "false");
            if ($scope.collapse) {
                $("body").addClass("nav-collapse");
            } else {
                $("body").removeClass("nav-collapse");
            }
        };
        $scope.collapseNav = function (index) {
            var nav = $scope.navs[index];
            nav.in = !nav.in;
            $("#collapse-" + nav.name).collapse(nav.in ? "show" : "hide");
        };
        var sideScroll = false;
        var preventDefault = function (e) {
            e.preventDefault();
        };
        $(".sidebar").on("mouseenter", function () {
            window.addEventListener('mousewheel', preventDefault);
        });
        $(".sidebar").on("mouseleave", function () {
            window.removeEventListener('mousewheel', preventDefault);
        });
        document.getElementById("sidebar-container").addEventListener("mousewheel", function (e) {
            if (sideScroll) {
                return;
            }
            var sidebar = $(".sidebar");
            var sidebarContainer = $("#sidebar-container");
            var floor = sidebar.height() - sidebarContainer.height();
            floor = floor > 0 ? 0 : floor;
            var topOrigin = sidebarContainer.css("margin-top");
            topOrigin = parseInt(topOrigin.substring(0, topOrigin.length - 2));
            var top = topOrigin - e.deltaY;
            top = top > 0 ? 0 : top;
            top = top < floor ? floor : top;
            if (top != topOrigin) {
                sideScroll = true;
                sidebarContainer.animate({"marginTop": top}, "fast", "swing", function () {
                    sideScroll = false;
                });
            }
        })
    })
</script>

<link type="text/css" rel="stylesheet" href="css/nav.css">

<div class="sidebar" ng-controller="nc" ng-class='{"collapse":collapse}'>
    <div id="sidebar-container">
        <ul class="nav nav-sidebar">
            <li>
                <a href="javascript:void(0)" ng-click="collapseF()" class="text-center hover">
                    <span ng-class='{"icon-align-justify":!collapse, "icon-list":collapse}'></span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-sidebar" ng-repeat="nav in navs"
            ng-class='{"nav-line":nav.index==40||nav.index==60||nav.index==120}'>
            <li ng-class='{"active":index == nav.name && !nav.subs.length}'>
                <a ng-if="!nav.subs.length" ng-href="{{nav.url}}"
                   ng-mouseenter="nav.hover = true" ng-mouseleave="nav.hover = false">
                    <span class="{{nav.icon}}"></span>
                    <span class="m-l-lg" ng-bind="nav.name" ng-class='{"hide":collapse}'></span>
                </a>
                <a ng-if="nav.subs.length" ng-click='collapseNav($index)'
                   ng-init="nav.in = index == nav.name" href="javascript:void(0)"
                   ng-mouseenter="nav.hover = true" ng-mouseleave="nav.hover = false">
                    <span ng-class='{"icon-chevron-down":nav.in, "icon-chevron-right":!nav.in}'></span>
                    <span class="m-l-lg" ng-bind="nav.name" ng-class='{"hide":collapse}'></span>
                </a>

                <div ng-show="nav.hover && collapse" class="nav-tooltip ng-hide" ng-bind="nav.name"></div>
            </li>
            <ul ng-if="nav.subs.length" ng-class='{"collapse":nav.subs.length,"in":nav.in}'
                id='{{"collapse-"+nav.name}}' class="nav nav-sidebar-sub">
                <li ng-repeat="sub in nav.subs"
                    ng-class='{"active":nav.name == index && subIndex == sub.name}'>
                    <a ng-href="{{sub.url}}" ng-mouseenter="sub.hover = true" ng-mouseleave="sub.hover = false">
                        <span class="{{sub.icon}}"></span>
                        <span class="m-l-lg" ng-bind="sub.name" ng-class='{"hide":collapse}'></span>
                    </a>

                    <div ng-show="sub.hover && collapse" class="nav-tooltip ng-hide" ng-bind="sub.name"></div>
                </li>
            </ul>
        </ul>
    </div>
</div>-->

<script>
    var m = angular.module("m", ["nm"]);
</script>

</body>
</html>
